<template>
  <div class="login-container">

    <div class="login-header">
      <img src="../assets/images/login-cover.png" style="width: 4rem;height: 4rem;">
    </div>

    <div class="login-content">
      <h2>华迪家校通</h2>
      <div class="login-form">
        <div class="login-form-item">
          <Icon name="user-o" size="0.55rem" />
          <input v-model="form.username" type="text" name="phone" autocomplete="off" placeholder="用户名/账号/手机号登录" />
        </div>
        <div class="login-form-item">
          <svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
            <rect width="48" height="48" fill="white" fill-opacity="0.01" />
            <rect x="6" y="22" width="36" height="22" rx="2" fill="none" stroke="#333" stroke-width="4"
              stroke-linejoin="round" />
            <path d="M14 22V14C14 8.47715 18.4772 4 24 4C29.5228 4 34 8.47715 34 14V22" stroke="#333" stroke-width="4"
              stroke-linecap="round" stroke-linejoin="round" />
            <path d="M24 30V36" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
          </svg>
          <input v-model="form.password" type="password" name="password" autocomplete="off" placeholder="请输入密码" />
        </div>
      </div>
      <div style="display: flex;flex-direction: row;">
        <Button class="login-register" plain round size="small" @click="openOrCloseRegisterPopup(true)">注册账号</Button>
        <Button class="login-forget" plain round size="small" @click="openOrCloseForgetPopup(true)">忘记密码？</Button>
      </div>

      <Button round block  @click="login(form)" style="background-color: #a5d63f"><span style="font-size: 16;font-weight: bold;" >登 录</span></Button>
      <div class="login-other">
        <Divider :style="{ color: '#9c9c9c', borderColor: '#cbcecf',height:'0px' }">其他登陆方式</Divider>
        <div style="text-align: center;">
          <Button round size="small" @click="openOrClosePhoneLoginPopup(true)">
            <Icon name="phone-o" size="0.45rem" color="#1989FA" />
            <span>验证码登陆</span>
          </Button>
        </div>
      </div>
    </div>
    <Popup closeable round v-model:show="showRegisterPopup" class="register-popup">
      <Cell class="register-cell">
        <h2 class="register-title">注册账号</h2>
      </Cell>
      <RegisterForm style="padding: 10px;" />
    </Popup>
    <Popup closeable round v-model:show="showForgetPopup" class="register-popup">
      <Cell class="forget-cell">
        <h2  class="register-title">重置密码</h2>
      </Cell>
      <ForgetForm style="padding: 10px;" />
    </Popup>
    <Popup closeable round v-model:show="showPhoneLoginPopup" class="register-popup">
      <Cell class="phone-login-cell">
        <h2  class="register-title">验证码登录</h2>
      </Cell>
      <PhoneLoginForm style="padding: 10px;" />
    </Popup>
  </div>
</template>

<script setup name="Login">
import { onMounted, reactive, ref } from "vue";
import { Button, Divider, Dialog, Icon, Cell, Image, Tag, Popup } from "vant";
import {  login } from "@/v-api/login";
import RegisterForm from "@/views/login/RegisterForm.vue";
import ForgetForm from "@/views/login/ForgetForm.vue";
import PhoneLoginForm from "@/views/login/PhoneLoginForm.vue";
const form = reactive({
  username: "",
  password: "",
});

const showRegisterPopup = ref(false);
const showForgetPopup = ref(false);
const showPhoneLoginPopup = ref(false);
const openOrCloseRegisterPopup = (value) => {
  showRegisterPopup.value = value;
}
const openOrCloseForgetPopup = (value) => {
  showForgetPopup.value = value;
}
const openOrClosePhoneLoginPopup = (value) => {
  showPhoneLoginPopup.value = value;
}
</script>

<style >
.register-popup {
  width: 90%;
}
.register-cell{
  background-color: #539ce4;
  height: 60px;
}
.forget-cell{
  background-color: #e68a55;
  height: 60px;
}
.phone-login-cell{
  background-color: #08c463;
  height: 60px;

}
.register-title {
  margin: 0.5em;
  display: flex;
  justify-content: center;
  align-items: center;
  letter-spacing: 5px;
  font-weight: bold;
}

</style>